<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>大河网订阅管理系统</title>

	<link href="css/css.css" rel="stylesheet" type="text/css" />
    <link href="css/style.css" rel="stylesheet" type="text/css" />
	<script src="js/jQuery-3.7.1.js"></script>
	<script type="text/javascript" src="js/pony.js"></script>
	<script src="js/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
	<style>
		#user {
			font-size: 16px;
		}
	</style>

  </head>
  
  <body>

	<table width="100%" border="0" cellspacing="0" cellpadding="0">
		<tr>
			<td height="30">
				<table width="100%" border="0" cellspacing="0" cellpadding="0">
					<tr>
						<td height="62" background="images/nav04.gif">
							<table style="padding-left: 32px;" width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
								<tr>
									<td width="21"><img src="images/ico07.gif" width="20" height="18" /></td>
									<td width="1400" style="padding-left: 30px;">
										<form id="form-search">
											按报纸名称：<input name="newsPaperName" type="text" size="12" id="newsPaperName"/>
											文章名称：<input name="fileTitle" type="text" size="12" id="fileTitle"/>
											<!-- 添加隐藏域 隐藏方法-->
											<input type="hidden" name="method" value="getNews">
											<input type="hidden" name="currentPage" value="1" id = "currentPage">
											<input name="Submit4" id="btn-search" type="button" class="right-button02" value="查询" onclick="check();" />
										</form>
									</td>
									<td><span id="user"></span></td>
								</tr>
							</table>
						</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr>
			<td>
				<table id="subtree1" style="DISPLAY: " width="100%" border="0" cellspacing="0" cellpadding="0">
					<tr>
						<td>
							<table width="95%" border="0" align="center" cellpadding="0" cellspacing="0">
								<tr>
									<td height="20">
										<span class="newfont07">
										<input type="button" class="right-button08" value="添加文章" id="btn-add"/>
										<input type="button" class="right-button08" value="在线用户统计" id="btn-online"/>
										<input type="button" class="right-button08" value="安全退出" id="btn-logout"/>
									</span>
								<tr>
									<td height="40" class="font42">
										<table width="100%" border="0" cellpadding="4" cellspacing="1" bgcolor="#464646" class="newfont03">
											<thead>
												<tr class="CTitle" >
													<td height="22" colspan="16" align="center" style="font-size:16px">文章列表</td>
												</tr>
												<tr bgcolor="#EEEEEE">
													<td width="3%" align="center" height="30">编号</td>
													<td width="5%" align="center">报纸名称</td>
													<td width="5%" align="center">日期</td>
													<td width="6%" align="center">版名</td>
													<td width="18%" align="center">文章标题</td>
													<td width="5%" align="center">文章作者</td>
													<td width="8%" align="center">操作</td>
												</tr>
											</thead>
											<tbody id="newsTbody"></tbody>

										</table>
									</td>
								</tr>
							</table>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
  </body>
<script>
	// 定义函数,加载数据
	function loadData(sendData) {
		$.getJSON("news/getNews",sendData,function (result) {
			// 根据返回结果处理数据
			if (result.code == 200){
				// 定义变量表示tbody内容
				let tbodyHtml = "";
				// 遍历结果集
				// index -> 每次迭代出来的元素的索引
				// object -> 每次迭代出来的元素

				$.each(result.data.list,function (index,news) {
					tbodyHtml += '<tr bgcolor="white">';
					tbodyHtml += '<td width="3%" align="center" height="30">' + news.id + '</td>';
					tbodyHtml += '<td width="5%" align="center">' + news.newsName + '</td>';
					tbodyHtml += '<td width="5%" align="center">' + news.newsDate + '</td>';
					tbodyHtml += '<td width="6%" align="center">' + news.layoutName + '</td>';
					tbodyHtml += '<td width="18%" align="center">' + news.newsTitle + '</td>';
					tbodyHtml += '<td width="5%" align="center">' + news.newsAuthor + '</td>';
					tbodyHtml += '<td width="8%" align="center"><a href="edit.html?id=' + news.id + '">编辑</a>&nbsp;&nbsp;<a href="javascript:remove(' + news.id + ')">删除</a></td>';
					tbodyHtml += '</tr>'
				})
				tbodyHtml += '<tr bgcolor="white">';
				tbodyHtml += '<td width="3%" align="right" height="30" colspan="7" style="font-size: 16px;">';
				tbodyHtml += '总记录数' + result.data.totalNum + ',&nbsp;&nbsp;总页数' + result.data.totalPages + ',&nbsp;&nbsp;每页显示' + result.data.pageSize + '条&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
				tbodyHtml += '<a href="javascript:goPage(1)">首页</a>&nbsp;&nbsp;';
				if (result.data.currentPage > 1){
					tbodyHtml += '<a href="javascript:goPage(' + (result.data.currentPage - 1) + ')">上一页</a>&nbsp;&nbsp;';
				}

				tbodyHtml += result.data.currentPage + '&nbsp;&nbsp;';
				if (result.data.currentPage < result.data.totalPages){
					tbodyHtml += '<a href="javascript:goPage(' + (result.data.currentPage + 1) + ')">下一页</a>&nbsp;&nbsp;';
				}

				tbodyHtml += '<a href="javascript:goPage(' + result.data.totalPages + ')">末页</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
				tbodyHtml += '</td>';
				tbodyHtml += '</tr>'
				// 将生成的html代码作为newsTbody的内容
				$("#newsTbody").html(tbodyHtml)
			}
			// 如果状态是302,表示应该登录,但是没有登录.跳转登录页面
			if (result.code == 302){
				window.location.href = "login.html"
			}
		})
	}

	// 页面加载完成,从服务端查询数据并填充页面
	window.onload = function () {
		loadData({method : "getNews"})
	}

	// 2.添加页面绑定点击事件
	$("#btn-add").click(function () {
		// 跳转添加页面
		window.location.href = "add.html";
	})
	// 根据id删除新闻
	function remove(id) {
		// 1) 确认是否删除
		if (confirm("确定要删除这条记录吗?")){
			// 2) 发送请求
			$.getJSON("news/remove/" + id,{},function (result) {
				if (result.code == 200){
					alert("删除成功!")
					// 重新加载数据
					loadData({"method": "getNews"});
				}else {
					alert("删除失败,请刷新后重试!")
				}
			})
		}
	}

	// 5.翻页方法
	function goPage(currentPage) {
		// 当前页码赋值
		$("#currentPage").val(currentPage)
		// 获取请求参数
		let sendData = $("#form-search").serialize();
		// 加载数据
		loadData(sendData);
	}

	// 4.搜索按钮绑定点击事件 条件查询
	$("#btn-search").click(function () {
		// 1) 生成查询条件
		let sendData = $("#form-search").serialize();
		// 2) 调用查询方法
		loadData(sendData)
	})
	// 6.退出功能
	$("#btn-logout").click(function () {
		if (confirm("确定退出吗?")){
			$.getJSON("admin/logout",{"method": "logout"},function (result) {
				if (result.code == 200){
					// 退出登录成功,返回登录页面
					window.location.href = "login.html";
				}
			})
		}

	})
	// 7.在线用户统计功能
	$("#btn-online").click(function () {
		window.location.href = "online.html"
	})
</script>

</html>
